<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/header.css" />
		<link rel="stylesheet" type="text/css" href="css/chat.css" />
		
		<style>
			html,
			body {
				height: 100%;
				margin: 0px;
				padding: 0px;
				overflow: hidden;
				-webkit-touch-callout: none;
				-webkit-user-select: none;
			}
		</style>
		
	</head>

	<body>
		
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title" id="zhuti"></h1>
		</header>
		
		<div id="msg-outter" class="mui-content">
			<div id='msg'>

			</div>
		</div>
	
		
		<footer>
			<div class="footer-center">
				<textarea id='msg-text' type="text" class='input-text'></textarea>
			</div>
			<label for="" class="footer-right">
				<button type="button" class="mui-btn mui-btn-gray" id="send">发送</button>
			</label>
		</footer>
		
		
		
		
		
		<script src="js/mui.min.js"></script>
		<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init();
			
			mui.plusReady(function () {
			var x = plus.webview.currentWebview();    
				var timing = x.friendNickname;
				console.log('3');
				document.getElementById('zhuti').innerHTML=timing;
				
				
			});
		
			
		</script>
		
		<script  type="text/javascript" charset="utf-8">

						// 创建命名空间，只需要把自己的代码，写进入，那么外部就无法访问
			//			(function($, doc){
							
							// 获取上一个页面传入的好友属性值
							var friendUserId;
							var friendNickname;
							var friendFaceImage;
							mui.plusReady(function(){
								
								// 获取我自己的用户信息					
								var me = app.getUserGlobalInfo();
								
								// 获取聊天页面webview
								var chattingWebview = plus.webview.currentWebview();
								// 设置聊天页面的软键盘样式
								chattingWebview.setStyle({
									softinputMode: "adjustResize"
								});
								
								// 获取上一个页面传入的好友属性值
								friendUserId = chattingWebview.friendUserId;
								friendNickname = chattingWebview.friendNickname;
								friendFaceImage = chattingWebview.friendFaceImage;
								
								// 标题改为朋友的昵称
							
								
								
								// 渲染初始化的聊天记录HTML
								initChatHistory();
								
								var areaMsgList = document.getElementById("msg");
								// 设置聊天记录进入页面的时候自动滚动到最后一条
								areaMsgList.scrollTop = areaMsgList.scrollHeight + areaMsgList.offsetHeight;
								
								// 获取dom控件
								var msg_text = document.getElementById("msg-text");
								var send = document.getElementById("send");
								
								// 监听用户输入，使得send按钮变色
								msg_text.addEventListener("input", function(){
									var msg_text_val = msg_text.value;
									if (msg_text_val.length > 0) {
										send.setAttribute("class", "mui-btn-green");
									} else {
										send.setAttribute("class", "mui-btn-gray");
									}
								});
								
								// 对当前的窗口监听resize事件
								window.addEventListener("resize", function(){
									resizeScreen();
									document.getElementById("msg-outter").style.paddingBottom = "50px";
								});
								
								// 发送消息按钮的事件绑定
								send.addEventListener("tap", function(){
									
									// 发送之前判断网络的状态
									var connectionStatus = plus.networkinfo.getCurrentType();
									if (connectionStatus == 0 || connectionStatus == 1) {
										app.showToast("请打开网络连接...", "error");
										return;
									}
									
									// 获取消息内容
									var msg_text_val = msg_text.value;
									
									// 判断消息内容，如果长度等于0，则return
									if (msg_text_val.length === 0) {
										return;
									}
									
									// 发送消息, 渲染消息的html到msg div之下
									sendMsg(app.imgServerUrl + me.faceImage, msg_text_val);
									// 情况消息文本框中的内容
									msg_text.value = "";
									// 发送消息完毕之后，把发送按钮的颜色改为灰白色
									send.setAttribute("class", "mui-btn-gray");
									
									// 构建ChatMsg
									var chatMsg = new app.ChatMsg(me.id, friendUserId, msg_text_val, null);
									// 构建DataContent
									var dataContent = new app.DataContent(app.CHAT, chatMsg, null);
									
									// 调用websocket 发送消息到netty后端
									var wsWebview = plus.webview.getWebviewById("zhuye.html");
									wsWebview.evalJS("CHAT.chat('" + JSON.stringify(dataContent) + "')");
			//						wsWebview.evalJS("CHAT.chat('" + msg_text_val + "')");
									
									// 保存聊天历史记录到本地缓存
									app.saveUserChatHistory(me.id, friendUserId, msg_text_val, 1);
									app.saveUserChatSnapshot(me.id, friendUserId, msg_text_val, true);
			//						receiveMsg("模拟接受消息~~~~~~");
								});
							});
							
							// 接受消息
							function receiveMsg(msg) {
								
								var msgHtml = '<div class="friend_lists">' +
													'<div class="header_img">' +
														'<img src="' + app.imgServerUrl + friendFaceImage + '" width="40px" height="40px" />' +
													'</div>' +
													'<div class="msg-wrapper right">' +
														'<p class="msg-left-white">' + msg + '</p>' +
													'</div>' +
											  '</div>'; 
								
								var msg_list = document.getElementById("msg");
								msg_list.insertAdjacentHTML("beforeend", msgHtml);
								
								playReceiveMsgSound();
							}
							
							// 发送消息
							function sendMsg(faceImg, msg) {
								
								var msgHtml = '<div class="me_lists">' +
												'<div class="header_img">' +
													'<img src="' + faceImg + '" width="40px" height="40px" />' +
												'</div>' +
												'<div class="msg-wrapper left">' +
													'<p class="msg-right-green">' + msg + '</p>' +
												'</div>' +
											  '</div>';
								var msg_list = document.getElementById("msg");
								msg_list.insertAdjacentHTML("beforeend", msgHtml);
								
								playSendMsgSound();
							}
							
							// 播放发送消息的铃声
							function playSendMsgSound() {
								var audioPlayer = plus.audio.createPlayer("/mp3/send.mp3");
								audioPlayer.play();
							}
							
							// 播放接受消息的铃声
							function playReceiveMsgSound() {
								var audioPlayer = plus.audio.createPlayer("/mp3/di_didi.mp3");
								audioPlayer.play();
							}
							
							// 重新调整聊天窗口
							function resizeScreen() {
								var areaMsgList = document.getElementById("msg");
								// 设置聊天记录进入页面的时候自动滚动到最后一条
								areaMsgList.scrollTop = areaMsgList.scrollHeight + areaMsgList.offsetHeight;
							};
							
			//			}(mui, document));
						
						// 初始化用户的聊天记录
						function initChatHistory() {
							var msg_list = document.getElementById("msg");
							
							var me = app.getUserGlobalInfo();
							var myId = me.id;
							var myFaceImg = me.faceImage;
			
							var chatHistoryList = app.getUserChatHistory(myId, friendUserId);
							
							var togetherHTML = "";
							
							for (var i = 0 ; i < chatHistoryList.length ; i ++) {
								var singleMsg = chatHistoryList[i];
								if (singleMsg.flag == 1) {
									togetherHTML += '<div class="me_lists">' +
												'<div class="header_img">' +
													'<img src="' + app.imgServerUrl + myFaceImg + '" width="40px" height="40px" />' +
												'</div>' +
												'<div class="msg-wrapper left">' +
													'<p class="msg-right-green">' + singleMsg.msg + '</p>' +
												'</div>' +
											  '</div>';
								} else {
									togetherHTML += '<div class="friend_lists">' +
													'<div class="header_img">' +
														'<img src="' + app.imgServerUrl + friendFaceImage + '" width="40px" height="40px" />' +
													'</div>' +
													'<div class="msg-wrapper right">' +
														'<p class="msg-left-white">' + singleMsg.msg + '</p>' +
													'</div>' +
											  '</div>';
								}
							}
							msg_list.innerHTML = togetherHTML;
						}
						
					</script>
		
		
	</body>
	
	
	
	

</html>
